<template>
  <bd-popup
    popupId="lotteryV3NotEligible"
    :weights="4"
    v-model:show="props.show"
    :style="{
      overflow: 'initial',
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="999999"
    teleport="body"
    :close-on-click-overlay="false"
  >
    <div class="box-bg">
      <div class="box items-center">
        <img class="box-img" src="/image/lotterymoney/gth-icon.svg" />
        <div class="box-title">{{ $t("lotteryMoney.wzg") }}</div>
        <div class="box-desc">
          {{
            $t("lotteryMoney.zrxzzgtc1").replace(
              "xxx",
              lottery.superPool
                ? lottery.superPool.currentPeriodSupperDrawCount || "xx"
                : 1
            )
          }}
          {{ $t("lotteryMoney.nksymjxzhyy").replace("xxx", "1") }}
        </div>
      </div>
      <!-- 确认 -->
      <div class="box-footer items-center">
        <div class="box-footer-item" @click.stop="jumpPage(1)">
          {{ $t("lotteryMoney.yqhy") }}
        </div>
        <div class="box-footer-item" @click.stop="jumpPage(2)">
          {{ $t("lotteryMoney.ljxz") }}
        </div>
      </div>

      <!-- 关闭 -->
      <img
        class="close"
        src="/image/close-fff-icon.svg"
        @click.stop="closePopup"
      />
    </div>
  </bd-popup>
</template>
<script setup lang="ts" name="hashValuePopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useClipboard } from "@vueuse/core";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    lottery: Object;
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits([
  "update:show",
  "betCall",
  "confirm",
  "inviteFriends",
]);

onMounted(() => {});
onBeforeUnmount(() => {});
// 跳转下注弹窗
const jumpPage = (val: number) => {
  if (val == 1) {
    emit("inviteFriends");
  } else {
    emit("betCall");
  }
};

// 关闭弹窗
const closePopup = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.box {
  justify-content: center;
  flex-direction: column;
  padding: 20 * 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  &-bg {
    border-radius: 12 * 2px;
    background-color: #fff;
    padding-bottom: 10 * 2px;
  }

  &-img {
    width: 40 * 2px;
    height: 40 * 2px;
    margin-bottom: 15 * 2px;
  }
  &-title {
    text-align: center;
    color: #141924;
    font-size: 14 * 2px;
    font-weight: 510;
    margin-bottom: 12 * 2px;
  }
  &-desc {
    text-align: center;
    color: #999da7;
    font-size: 13 * 2px;
    font-weight: 400;
  }

  &-footer {
    margin: 10 * 2px 15 * 2px;
    margin-bottom: 0;
    justify-content: center;
    &-item {
      margin: 0 5 * 2px;
      width: 137 * 2px;
      background-color: #007bff;
      padding: 8 * 2px 0;
      border-radius: 6 * 2px;
      text-align: center;
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
